[#ftl]
[@define "agile.dijit.TooltipDialog" "agile._Component,agile._Container,agile._Resizable,agile._PinAdvice"]
	category:"TooltipDialog Component"		
	,widgetName:"TooltipDialog"
	[#assign templateString][#compress]
	<div class="agileComponent agileTooltipDialog dijitTooltipContainer" data-dojo-attach-point='containerNode'>
	</div>
	[/#compress][/#assign]
	,templateString: "${templateString?js_string}"	
//		,templateMap:{
//			dojo:"<div data-dojo-type='{dojoDeclaredClass}' {id} data-dojo-props='{style}{dojo-parameters}'>{innerWidets}</div>"
//			,agile:"<div data-dojo-type='{declaredClass}' {id} data-dojo-props='{style}{parameters}'>{innerWidets}</div>"
//		}
		
//		,templateMap:{
//			dojo:"<div {id} data-dojo-type='{dojoDeclaredClass}' data-dojo-props='{style-props}'>{innerWidets}</div>"
//			,agile:"<div data-dojo-type='{declaredClass}' data-dojo-props='{style-props}'><div>{innerWidets}</div></div>"
//		}
	,styleConstraints:agile.delegate(agile._Component.prototype.styleConstraints,{
		"left": {ignore:function(ownerWidget,sourceType){ return sourceType == "dojo";}}
	   ,"top": {ignore:function(ownerWidget,sourceType){ return sourceType == "dojo";}}
	   ,"right": {ignore:function(ownerWidget,sourceType){ return sourceType == "dojo";}}
	   ,"bottom": {ignore:function(ownerWidget,sourceType){ return sourceType == "dojo";}}
	   ,"position": {ignore:function(ownerWidget,sourceType){ return sourceType == "dojo";}}
	   ,"z-index": {ignore:function(ownerWidget,sourceType){ return sourceType == "dojo";}}
	})
	,attributes:lang.delegate(agile._Component.prototype.attributes,{
//		position:lang.mixin({},agile.ComboMetadata,{	
//			label:"i18n_position",
//			options:agile.i18nMap(["left","right","above","below"],null,true)			
//			,onValueChange:function(/*widget*/widget,/*String*/name,/*Object*/value){	
//				widget.reposition(widget.metadata("parameters.position"),value);
//				widget.metadata("parameters.position",value);
//			}																			
//		})
		connector:lang.mixin({},agile.TextMetadata,{
			label:"i18n_connector"	
			,ignore:function(ownerWidget,sourceType){ return sourceType == "dojo";}
		})
//		title:"",autofocus:true
//		,connectId:lang.mixin({},agile.ArrayMetadata,{
//		   label:"i18n_connect_ids",elementType:"string"
//		   ,onValueChange:function(widget,name,value){					
//				//widget.delegate.addTarget(value);
//				widget.metadata(this.metadataCategory+"."+name,value);
//			}
//	   })
	})
	,_getDelegatePrototype:function(){
		agile.requireX("dijit.TooltipDialog");
		return dijit.TooltipDialog.prototype;
	}
	,initDefaultMetadata:function(){
//		this.metadata("parameters.position","below");
//		this.metadata("parameters.connectId",[]);
		this.metadata("parameters.connector","Open Tooltip Dialog");
//		this.metadata("parameters.showDelay",500);	
		this.metadata("dojoDeclaredClass","dijit.TooltipDialog");
	}
	,init:function(){		
		if(this._initTooltipDialog) return; this._initTooltipDialog = true;
		
		this.connectorNode = construct.create("div",{innerHTML:""});
		domClass.add(this.connectorNode,"dijitTooltipConnector");
		construct.place(this.connectorNode,this.containerNode,"last");
		
		this.reposition(null,"below");
		//this.reposition(null,this.metadata("parameters.position"));
//			this.reposition1(null);
		
//			this.delegate = new dijit.Tooltip({label:this.metadata("label")});			
//			this.delegate.addTarget(this.metadata("connectId"));
//			
//			style.set(this.containerNode,"zIndex",0);
//			style.set(this.connectorNode,"zIndex",style.set(this.containerNode,"zIndex") + 1);
//			style.set(this.domNode,{width:null,height:null});
//			//console.log("############style",this.style,this.metadata("style"));
	}
	,reposition:function(oldPosition,newPosition){		
		//var oldPosition = this.metadata("parameters.position");
		if(oldPosition != newPosition){
			if(oldPosition){			
				domClass.remove(this.containerNode,"dijitTooltip"+agile.capitalize(oldPosition));
			}			
			if(newPosition){
				domClass.add(this.containerNode,"dijitTooltip"+agile.capitalize(newPosition));
			}
		}
//			//console.log("oldPosition===",oldPosition,"newPosition====",newPosition);
		switch (newPosition){
			case "left":
				style.set(this.connectorNode,{"float":"right",top:"0px",left:null,right:"-14px",bottom:null});
				break;
			case "right":
//					style.set(this.connectorNode,{"float":"right",right:"-10px"});
				style.set(this.connectorNode,{"float":"left",top:"0px",left:"-14px",right:null,bottom:null});
				break;	
			case "above":
//					style.set(this.connectorNode,{"float":"bottom",bottom:"-10px"});
				style.set(this.connectorNode,{"float":"bottom",top:null,left:"0px",right:null,bottom:"-14px"});
				break;
			case "below":
//					style.set(this.connectorNode,{"float":"top",top:"-10px"});
				style.set(this.connectorNode,{"float":"top",top:"-14px",left:"0px",right:null,bottom:null});
				break;	
		}				
	}
	,toHtml:function(params){
		if(params.sourceType == "dojo"){
//			this.metadata("parameters.connectId",[this.metadata("id")]);
//			var s = "<div style='position:absolute;left:{left};top:{top}'><span id='{id}'>{connector}</span>{template}</div>";
//			var s = "<span id='{id}' style='position:absolute;left:{left};top:{top}'>{connector}</span>{template}";
			var s = '<button data-dojo-type="dijit/form/DropDownButton" data-dojo-props=\'style:"position:absolute;left:{left};top:{top}",iconClass:"",label:"{connector}"\'>{template}</button>';
			
			var template = this.inherited(arguments);
			return lang.replace(s,{left:this.metadata("style.left"),top:this.metadata("style.top"),id:this.metadata("id"),connector:this.metadata("parameters.connector"),template:template});
		}
		return this.inherited(arguments);
	}
[/@]	
